<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '作品详情',
    navigationBarBackgroundColor: '#f8f8f8',
    navigationBarTextStyle: 'black'
  },
}
</route>

<template>
  <view class="work-detail-container">
    <!-- 作品信息 -->
    <view v-if="workDetail" class="work-content">
      <!-- 作品封面和基本信息 -->
      <view class="work-header">
        <image class="work-cover" :src="workDetail.cover" mode="aspectFill" />
        <view class="work-info">
          <text class="work-title">{{ workDetail.title }}</text>
          <text class="work-author">{{ workDetail.author }}</text>
          <view class="work-meta">
            <text class="work-type">{{ workDetail.type === 'book' ? '绘本' : '绘本集' }}</text>
            <text class="work-pages" v-if="workDetail.totalPages">{{ workDetail.totalPages }}页</text>
          </view>
        </view>
      </view>

      <!-- 作品简介 -->
      <view class="work-description">
        <text class="description-title">作品简介</text>
        <text class="description-text">{{ workDetail.description || '暂无简介' }}</text>
      </view>

      <!-- 权限提示 -->
      <view class="permission-notice" v-if="workDetail.permission !== 'allow'">
        <view class="notice-icon">
          <uni-icons 
            :type="workDetail.permission === 'preview' ? 'info' : 'locked'" 
            :color="workDetail.permission === 'preview' ? '#ff9500' : '#999'" 
            size="20"
          ></uni-icons>
        </view>
        <view class="notice-content">
          <text class="notice-title">
            {{ workDetail.permission === 'preview' ? '试读模式' : '暂不开放' }}
          </text>
          <text class="notice-text">
            {{ getPermissionText(workDetail.permission) }}
          </text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button 
          class="read-btn"
          :class="getButtonClass(workDetail.permission)"
          :disabled="workDetail.permission === 'deny'"
          @click="startReading"
        >
          <uni-icons 
            :type="workDetail.permission === 'preview' ? 'eye' : 'book'" 
            :color="workDetail.permission === 'deny' ? '#999' : '#fff'" 
            size="18"
          ></uni-icons>
          <text class="btn-text">{{ getButtonText(workDetail.permission) }}</text>
        </button>
        
        <button class="collect-btn" @click="toggleCollect">
          <uni-icons 
            :type="workDetail.isCollected ? 'star-filled' : 'star'" 
            :color="workDetail.isCollected ? '#ff9500' : '#666'" 
            size="18"
          ></uni-icons>
          <text class="btn-text">{{ workDetail.isCollected ? '已收藏' : '收藏' }}</text>
        </button>
      </view>

      <!-- 相关统计 -->
      <view class="work-stats">
        <view class="stat-item">
          <text class="stat-number">{{ workDetail.readCount || 0 }}</text>
          <text class="stat-label">阅读量</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ workDetail.collectCount || 0 }}</text>
          <text class="stat-label">收藏量</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ workDetail.likeCount || 0 }}</text>
          <text class="stat-label">点赞量</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <uni-icons type="spinner-cycle" size="24" color="#007AFF"></uni-icons>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-if="error" class="error-container">
      <uni-icons type="close-circle" size="48" color="#ff4757"></uni-icons>
      <text class="error-text">{{ error }}</text>
      <button class="retry-btn" @click="loadWorkDetail">重试</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'
import { getWorkDetail, toggleWorkCollect, checkWorkPermission } from '@/api/community'

// 用户store
const userStore = useUserStore()

// 页面参数
const workId = ref<number>(0)
const workType = ref<'book' | 'bookset'>('book')

// 数据状态
const workDetail = ref<any>(null)
const loading = ref(false)
const error = ref('')

// 权限类型定义
type PermissionType = 'allow' | 'preview' | 'deny'

// 获取权限提示文本
function getPermissionText(permission: PermissionType): string {
  switch (permission) {
    case 'preview':
      return '您可以试读前3页内容，完整版本需要相应权限'
    case 'deny':
      return '该作品暂不开放阅读，敬请期待'
    default:
      return ''
  }
}

// 获取按钮样式类
function getButtonClass(permission: PermissionType): string {
  switch (permission) {
    case 'allow':
      return 'allow'
    case 'preview':
      return 'preview'
    case 'deny':
      return 'deny'
    default:
      return 'allow'
  }
}

// 获取按钮文本
function getButtonText(permission: PermissionType): string {
  switch (permission) {
    case 'allow':
      return '开始阅读'
    case 'preview':
      return '试读3页'
    case 'deny':
      return '暂不开放阅读'
    default:
      return '开始阅读'
  }
}

// 加载作品详情
async function loadWorkDetail() {
  try {
    loading.value = true
    error.value = ''

    // 调用真实API获取作品详情
    const response = await getWorkDetail(workId.value, workType.value)

    if (response.code === 0 && response.data) {
      workDetail.value = response.data
    } else {
      throw new Error(response.msg || '获取作品详情失败')
    }
  } catch (err) {
    console.error('加载作品详情失败:', err)
    error.value = err instanceof Error ? err.message : '加载失败，请重试'
  } finally {
    loading.value = false
  }
}

// 开始阅读
function startReading() {
  if (!workDetail.value || workDetail.value.permission === 'deny') return
  
  if (workDetail.value.type === 'book') {
    // 跳转到绘本阅读器
    uni.navigateTo({
      url: `/pages-sub/reading/picture-book-reader/index?bookId=${workDetail.value.id}&preview=${workDetail.value.permission === 'preview'}`
    })
  } else {
    // 跳转到绘本集详情
    uni.navigateTo({
      url: `/pages-sub/reading/picture-book-set/index?id=${workDetail.value.id}&preview=${workDetail.value.permission === 'preview'}`
    })
  }
}

// 切换收藏状态
async function toggleCollect() {
  if (!workDetail.value) return

  try {
    const response = await toggleWorkCollect(workDetail.value.id, workDetail.value.type)

    if (response.code === 0 && response.data) {
      workDetail.value.isCollected = response.data.isCollected
      workDetail.value.collectCount = response.data.collectCount

      uni.showToast({
        title: workDetail.value.isCollected ? '收藏成功' : '取消收藏',
        icon: 'success'
      })
    } else {
      throw new Error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    uni.showToast({
      title: error instanceof Error ? error.message : '操作失败',
      icon: 'none'
    })
  }
}

onLoad((options: any) => {
  if (options.workId) {
    workId.value = parseInt(options.workId)
  }
  if (options.workType) {
    workType.value = options.workType
  }
  
  loadWorkDetail()
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.work-detail-container {
  min-height: 100vh;
  background: $gray-100;
}

.work-content {
  background: $white;
  padding: 20px;
}

.work-header {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  
  .work-cover {
    width: 100px;
    height: 140px;
    border-radius: $border-radius-lg;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .work-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .work-title {
      font-size: 20px;
      font-weight: 700;
      color: $dark-gray;
      line-height: 1.3;
      margin-bottom: 8px;
    }
    
    .work-author {
      font-size: 14px;
      color: $medium-gray;
      margin-bottom: 12px;
    }
    
    .work-meta {
      display: flex;
      gap: 12px;
      
      .work-type, .work-pages {
        font-size: 12px;
        color: $gray-500;
        padding: 4px 8px;
        background: $gray-100;
        border-radius: 12px;
      }
    }
  }
}

.work-description {
  margin-bottom: 20px;
  
  .description-title {
    font-size: 16px;
    font-weight: 600;
    color: $dark-gray;
    margin-bottom: 10px;
    display: block;
  }
  
  .description-text {
    font-size: 14px;
    line-height: 1.6;
    color: $medium-gray;
  }
}

.permission-notice {
  display: flex;
  gap: 12px;
  padding: 15px;
  background: rgba(255, 149, 0, 0.1);
  border-radius: $border-radius-lg;
  border-left: 4px solid #ff9500;
  margin-bottom: 20px;
  
  .notice-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .notice-content {
    flex: 1;
    
    .notice-title {
      font-size: 14px;
      font-weight: 600;
      color: #ff9500;
      margin-bottom: 4px;
      display: block;
    }
    
    .notice-text {
      font-size: 12px;
      line-height: 1.4;
      color: $medium-gray;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  
  .read-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    
    &.allow {
      background: $primary-blue;
      color: $white;
    }
    
    &.preview {
      background: #ff9500;
      color: $white;
    }
    
    &.deny {
      background: $gray-300;
      color: $gray-500;
    }
    
    .btn-text {
      color: inherit;
    }
  }
  
  .collect-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    background: $gray-100;
    border: none;
    border-radius: 25px;
    
    .btn-text {
      font-size: 14px;
      color: $medium-gray;
    }
  }
}

.work-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid $gray-200;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    
    .stat-number {
      font-size: 18px;
      font-weight: 700;
      color: $dark-gray;
    }
    
    .stat-label {
      font-size: 12px;
      color: $medium-gray;
    }
  }
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 15px;
  
  .loading-text, .error-text {
    font-size: 14px;
    color: $medium-gray;
    text-align: center;
  }
  
  .retry-btn {
    padding: 10px 20px;
    background: $primary-blue;
    color: $white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
  }
}
</style>
